<#-- Created by IntelliJ IDEA.
 User: qiguoqing
 Date: 2020/11/14
 Time: 11:06
 To change this template use File | Settings | File Templates.-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>项目里程碑设置</title>
    <meta name="renderer" content="webkit">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#--   <link rel="stylesheet" href="${re.contextPath}/plugin/lay/layui/css/layui.css">-->
    <!--layui样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
    <#--    <script type="text/javascript" src="${re.contextPath}/plugin/lay/layui/layui.js"-->
    <#--            charset="utf-8"></script>-->
<style>
    .project{
        margin-top: 20px;
        padding: 0px;

    }
    .layui-laypage-limits select {
        width: 100% !important;
    }

</style>
</head>
<body class="whitebg">
<div class="layui-row">
    <div class="layui-col-xs6 layui-col-md4">
<#--        <div class="grid-demo">-->
<#--            搜索类型：-->
<#--            <div class="layui-inline">-->
<#--                <select name="PTYPEList" id="PTYPEList">-->
<#--                    <option value="">选择项目类型</option>-->
<#--                    <#list PTYPEList as vo>-->
<#--                        <option value="${vo.badtCode}">${vo.badtName}</option>-->
<#--                    </#list>-->
<#--                </select>-->
<#--            </div>-->
<#--            <button class="select-on layui-btn layui-btn-sm" data-type="select" onclick="queryType()"></button>-->
<#--            <div class="layui-col-md12" style="height:40px;margin-top:3px;">-->
<#--                <div class="layui-btn-group">-->
<#--                    <button class="layui-btn layui-btn-normal" data-type="add" onclick="addType()">-->
<#--                        <i class="layui-icon" lay-event="add">&#xe608;</i>新增-->
<#--                    </button>-->
<#--                </div>-->
<#--            </div>-->
        <div style="padding: 10px 20px 0px 20px">
            <table id="typeList" style="height: 300px;width:100%;margin-left: 2px" class="layui-hide" lay-filter="type" width="100%" data-type="getType"></table>
        </div>
<#--        </div>-->
    </div>
    <div class="layui-col-xs12 layui-col-md8">
<#--        <div class="grid-demo grid-demo-bg1">-->
<#--            <div class="layui-col-md12" style="height:10px;margin-top:3px;">-->
<#--                <div class="layui-btn-group">-->
<#--                    <button class="layui-btn layui-btn-normal" data-type="add" onclick="addStage()">-->
<#--                        <i class="layui-icon" lay-event="add">&#xe608;</i>新增-->
<#--                    </button>-->
<#--                </div>-->
<#--            </div>-->
        <div style="padding: 10px 20px 0px 0px">
            <table id="stageList" style="height: 300px;width:100%" class="layui-hide" lay-filter="stage" width="200px" height="300px"></table>
        </div>
<#--        </div>-->
        <div class="grid-demo grid-demo-bg1">
<#--            <div class="layui-col-md12" style="height:10px;margin-top:3px;">-->
<#--                <div class="layui-btn-group">-->
<#--                    <button class="layui-btn layui-btn-normal" data-type="add" onclick="addMilepost()">-->
<#--                        <i class="layui-icon" lay-event="add">&#xe608;</i>新增-->
<#--                    </button>-->
<#--                </div>-->
<#--            </div>-->
            <div style="padding: 10px 20px 0px 0px">
                <table id="milepostList" style="height: 300px;width:100%" class="layui-hide" lay-filter="milepost"></table>
            </div>
        </div>
    </div>
</div>

<form class="layui-form" id="test" style="display:none">
<div class="myDataCentere" style="width: 900px;height: 200px">
    <ul>
        <li>
            <label class="layui-form-label">添加阶段</label>
            <select name="LCList" id="LCList">
                <option value="">选择阶段</option>
                <#list LCList as vo>
                    <option value="${vo.badtCode}">${vo.badtName}</option>
                </#list>
            </select>
        </li>
    </ul>
</div>
<div style="background-color: white;background-color: white;padding: 10px;text-align: center;position: fixed;bottom: 1px;width: 100%;">
    <button class="layui-btn " lay-filter="submitStage" lay-submit type="button">添加</button>
    <button class="layui-btn layui-btn-primary" type="button" id="close">取消</button>
</div>
</form>

<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/cardUtils.js"></script>
<script type="text/html" id="toolBarType">
<#--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detailType">查看</a>-->
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="editType">编辑</a>
<#--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delType">删除</a>-->
</script>

<script type="text/html" id="toolBarStage">
<#--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detailStage">查看</a>-->
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="editStage">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delStage">删除</a>
</script>

<script type="text/html" id="toolBarMilepost">
<#--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detailMilepost">查看</a>-->
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="editMilepost">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delMilepost">删除</a>
<#--    <a class="layui-btn layui-btn-xs" lay-event="editGuide">指南</a>-->
</script>
<script type="text/html" id="typeToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addAType">新增</button>
<#--        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<#--        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>
<script type="text/html" id="stageToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addAStage">新增</button>
<#--        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<#--        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>
<script type="text/html" id="milepostToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addAMilepost">新增</button>
<#--        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<#--        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>
<script>
    var layer;
    var form = layui.form;
    var table = null;
    var typeTableIns = null;
    var stageTableIns = null;
    var milepostTableIns = null;
    $(function(){
        $('html').css('background-color','#fff')
    })
    document.onkeydown = function (e) { // 回车提交表单
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $(".select .select-on").click();
        }
    }

    var stageId = null;
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element = "";
    layui.use('element', function () {
        element = layui.element;
    });
    layui.use('table', function () {
        table = layui.table;
        element = element;
        //方法级渲染
        typeTableIns = table.render({
            id: 'typeList',
            elem: '#typeList',
            url: '/adminManager/jc/milepostManagerJc/typeList',
            toolbar: '#typeToolbar',
            cols: [[
                {
                    title: '序号', width: '20%', templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {field: 'badtName', title: '项目类型', width: '60%', sort: false},
                {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBarType"}
            ]],
            page: false,
            done: function (res, currentCount) {
                //***重点***：table渲染完成后渲染element进度条
                element.render()
                var firstType = $('.layui-table-view[lay-id="typeList"]').children('.layui-table-box').children('.layui-table-body').find('table tbody tr[data-index="0"]');
                if(firstType.length > 0){
                    firstType.click();
                }else{
                    clearLayuiTable("stageList");
                    localStorage.removeItem("currentType");
                    localStorage.removeItem("currentStageId");
                }

            }
        });
        table.on('tool(type)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detailType') {
                layer.alert('您所查看的项目类型是：[<label style="color: #00AA91;">' + data.badtName + '</label>]')
            }if(obj.event === 'editType') {
                viewEditType(data.badtNo);
            }if (obj.event === 'delType') {
                layer.confirm('是否确定删除[<label style="color: #00AA91;">' + data.badtName + '</label>]数据?', function () {
                    delType(data.badtNo);
                });
            }
        });
        table.on('row(type)', function(obj){
            var data = obj.data;
            //缓存当前选择的项目类型
            localStorage.setItem("currentType",data.badtCode);
            queryStage(data.badtCode)
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        table.on('toolbar(type)',function(obj){
            switch(obj.event){
                case 'addAType':
                    console.log("点击了新增");
                    addType();
            };
        })
    })
    layui.use('table', function () {
        table = layui.table;
        element = element;
        //方法级渲染
        stageTableIns = table.render({
            id: 'stageList',
            elem: '#stageList',
            url: '/adminManager/jc/milepostManagerJc/stageList',
            toolbar: '#stageToolbar',
            cols: [[
                {
                    title: '序号', width: '19%', templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {field: 'stageName', title: '项目阶段', width: '50%', sort: false},
                {field: 'orderNum', title: '顺序', width: '10%', sort: false},
                {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBarStage"}
            ]],
            page: false,
            done: function (res, currentCount) {
                //***重点***：table渲染完成后渲染element进度条
                element.render()
                var fristStage = $('.layui-table-view[lay-id="stageList"]').children('.layui-table-box').children('.layui-table-body').find('table tbody tr[data-index="0"]');
                if(fristStage.length > 0){
                    fristStage.click();
                }else{
                    clearLayuiTable("milepostList");
                    localStorage.removeItem("currentStageId");
                }
            }
        });

        table.on('checkbox(stage)', function(obj){
            console.log(obj)
        });
        table.on('tool(stage)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detailStage') {
                layer.alert('您所查看的项目阶段是：[<label style="color: #00AA91;">' + data.stageName + '</label>]')
            }if(obj.event === 'editStage') {
                viewEditStage(data.id);
            }if (obj.event === 'delStage') {
                layer.confirm('是否确定删除[<label style="color: #00AA91;">' + data.stageName + '</label>]数据?', function () {
                    delStage(data.id);
                });
            }
        })
        table.on('row(stage)', function(obj){
            var data = obj.data;
            queryMilepost(data.id)
            stageId = data.id
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        table.on('toolbar(stage)',function(obj){
            switch(obj.event){
                case 'addAStage':
                    addStage();
            };
        })
    })

    layui.use('table', function () {
        table = layui.table;
        element = element;
        //方法级渲染
        milepostTableIns = table.render({
            id: 'milepostList',
            elem: '#milepostList',
            url: '/adminManager/jc/milepostManagerJc/milepostList',
            toolbar: '#milepostToolbar',
            cols: [[
                {
                    title: '序号', width: '10%', templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {field: 'milepostName', title: '项目里程', width: '40%', sort: false},
                {field: 'milepostZb', title: '占比', width: '15%', sort: false},
                {field: 'orderNum', title: '顺序', width: '15%', sort: false},
                {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBarMilepost"}
            ]],
            page: false,
            done: function (res, currentCount) {
                //***重点***：table渲染完成后渲染element进度条
                element.render()
            }
        });
        table.on('tool(milepost)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detailMilepost') {
                layer.alert('您所查看的里程碑是：[<label style="color: #00AA91;">' + data.milepostName + '</label>]')
            }else if(obj.event === 'editMilepost') {
               viewEditMilepost(data.id);
            }else if (obj.event === 'delMilepost') {
                layer.confirm('是否确定删除[<label style="color: #00AA91;">' + data.milepostName + '</label>]数据?', function () {
                    delMilepost(data.id);
                });
            }
        });
        table.on('toolbar(milepost)',function(obj){
            switch(obj.event){
                case 'addAMilepost':
                   addMilepost();
            };
        })
    })
    function delType(badtNo) {
        layerAjax('/adminManager/jc/milepostManagerJc/delType', {badtNo:badtNo}, '', function (d) {
            if (d.flag == true) {
                layui.table.reload('typeList');
                layer.msg(d.msg, {icon: 1});
            } else {
                layer.msg(d.msg, {icon: 1});
            }
            console.log(d);
        });
    }
    function delStage(id) {
        layerAjax('/adminManager/jc/milepostManagerJc/delStage', {id:id}, '', function (d) {
            if (d.flag == true) {
                layui.table.reload('stageList');
                layer.msg("操作成功",{icon: 1});
            } else {
                layer.msg(d.msg, {icon: 1});
            }
            console.log(d);
        });
    }
    function delMilepost(id) {
        layerAjax('/adminManager/jc/milepostManagerJc/delMilepost', {id:id}, '', function (d) {
            if (d.flag == true) {
                layui.table.reload('milepostList');
                layer.msg("操作成功", {icon: 1});
            } else {
                layer.msg(d.msg, {icon: 1});
            }
            console.log(d);
        });
    }
    function addType() {
        var w = ($(window).width()*0.9);
        var h = ($(window).height()*0.9);
        layer.open({
            id: 'type-add',
            type: 2,
            area: [w+'px', h+'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "新增项目类型",
            content: '/adminManager/jc/milepostManagerJc/addType',
            yes: function(){
                alert(8888);
            },
            btn2: function(){
                layer.closeAll();
            },
            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                typeTableIns.reload();
            }
        });
    }
    function addStage() {
        var w = ($(window).width()*0.9);
        var h = ($(window).height()*0.9);
        var currentType = localStorage.getItem("currentType");
        if(!currentType){
            layer.msg("没有选择的项目类型",{icon:2});
            return ;
        }
        layer.open({
            id: 'stage-add',
            type: 2,
            area: [w+'px', h+'px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "新增项目阶段",
            content: '/adminManager/jc/milepostManagerJc/addStage',
            yes: function(){
                alert(8888);
            },
            btn2: function(){
                layer.closeAll();
            },
            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                stageTableIns.reload();
            }
        });
    }
    function addMilepost() {
        var currentStageId = localStorage.getItem("currentStageId");
        if(!currentStageId){
            layer.msg("没有选择的项目阶段",{icon:2});
            return ;
        }
        var w = ($(window).width() * 0.9);
        var h = ($(window).height() - 50);
        layer.open({
            id: 'milepost-add',
            type: 2,
            area: ['380px', '310px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "新增里程",
            content: ['/adminManager/jc/milepostManagerJc/addMilepost?id='+stageId,'no'],
            yes: function(){
                alert(8888);
            },
            btn2: function(){
                layer.closeAll();
            },
            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                milepostTableIns.reload();
            }
        });
    }
    function viewEditType(badtNo) {
        // var w = ($(window).width() * 0.9);
        // var h = ($(window).height() - 50);
        layer.open({
            id: 'type-update',
            type: 2,
            area: ['380px', '172px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "更新项目类型",
            content: ['/adminManager/jc/milepostManagerJc/updateType?badtNo=' + badtNo,'no'],
            yes: function(){
                alert(8888);
            },
            btn2: function(){
                layer.closeAll();
            },

            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                typeTableIns.reload();
            }
        });
    }
    function viewEditStage(id) {
        // var w = ($(window).width() * 0.9);
        // var h = ($(window).height() - 50);
        layer.open({
            id: 'stage-update',
            type: 2,
            area: ['380px', '220px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "更新项目阶段",
            content: ['/adminManager/jc/milepostManagerJc/updateStage?id=' + id,'no'],
            yes: function(){
                alert(8888);
            },
            btn2: function(){
                layer.closeAll();
            },

            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                stageTableIns.reload();
            }
        });
    }
    function viewEditMilepost(id) {
        var w = ($(window).width() * 0.9);
        var h = ($(window).height() - 50);
        layer.open({
            id: 'milepost-update',
            type: 2,
            area: ['380px', '330px'],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "更新里程",
            content: ['/adminManager/jc/milepostManagerJc/updateMilepost?id=' + id,'no'],
            yes: function(){
                alert(8888);
            },
            btn2: function(){
                layer.closeAll();
            },

            zIndex: layer.zIndex, //重点1,
            success: function(layero){
                layer.setTop(layero); //重点2
            },
            end: function () {
                milepostTableIns.reload();
            }
        });
    }
    // function queryType() {
    //     var PTYPEList = $('#PTYPEList').val();
    //     var jsondata = {
    //         projectTypeNo: PTYPEList,
    //     };
    //     table.reload('typeList', {
    //         where: jsondata
    //     });
    // }
    function queryStage(badtCode) {
        var badtCode = badtCode
        var jsondata = {
            projectTypeNo: badtCode,
        };
        table.reload('stageList', {
            where: jsondata
        });
    }
    function queryMilepost(id) {
        // alert(id)
        var id = id;
        localStorage.setItem("currentStageId",id);
        var jsondata = {
            stageId: id,
        };
        table.reload('milepostList', {
            where: jsondata
        });
    }
    function flushTypeList(){
        layui.table.reload('typeList');
    }
    function clearLayuiTable(id){
        table.reload(id, {
            where: ''
        });
    }
</script>
</body>

</html>